<template>
	<view id="app">
		<!-- 订单列表 -->
		<scroll-view scroll-X class="navBar" enable-flex @click="openMsg">
			<view class="nav" :class="index == current ? 'active' : ''" v-for="(item,index) in topNav" :key="index"
				@click="change(index)">
				<view class="item">
					<view class="txt">{{item.name}}({{item.num}})</view>
					<view class="line"></view>
				</view>
			</view>
		</scroll-view>
		<!-- 列表 -->
		<view class="order mlr30 mt30">

			<!-- 订单列表 -->
			<view class="list area mb30 pt10 plr25" @click="toDetail(item)" v-for="(item,index) in wrap.list"
				:key="index">
				<!-- 上 -->
				<view class="top rows ptb15 bdb1se f28">
					<!-- 订单编号 -->
					<view class="code c666">订单编号：{{item.number}}</view>
					<!-- 订单状态 -->
					<view class="state c333">{{item.status_text}}</view>
				</view>
				<!-- 内容 -->
				<view class="mid df ais ptb20 bdb1se">
					<!-- 商品图片 -->
					<view class="proImg img180">
						<image :src="item.goodsData.images[0]" mode="aspectFill" lazy-load></image>
					</view>
					<!-- 商品信息 -->
					<view class="proInfo df dfc dfsb oh ml20 f1">
						<!-- 商品名称 -->
						<view class="title t2hd f28 c333 b">{{item.goodsData.name}}</view>
						<!-- 其他 -->
						<view class="other c333 f28 tar">
							<text>共{{item.num}}件商品</text>
							<text class="cff9646">￥{{item.total}}</text>
						</view>
					</view>
				</view>
				<!-- 功能区 -->
				<view class="botFn df dfr ptb20" v-if="item.status == 1">
					<view class="mr30">
						<view class="btn cancel w150">查看详情</view>
					</view>
					<view class="mr30">
						<view class="btn cancel w150" @click.stop="target = index;cancel()">取消订单</view>
					</view>
					<view>
						<view class="btn prmary w150" @click.stop="target = index;pay()">确认支付</view>
					</view>
				</view>
				<view class="botFn df dfr ptb20" v-else-if="item.status == 2">
					<view class="mr30">
						<view class="btn cancel w150">查看详情</view>
					</view>
					<view>
						<view class="btn prmary w150" @click.stop="target = index;$refs.backAlt.open()">申请退款</view>
					</view>
				</view>
				<view class="botFn df dfr ptb20" v-else-if="item.status == 3">
					<view class="mr30">
						<view class="btn cancel w150">查看详情</view>
					</view>
					<view>
						<view class="btn prmary w150" @click.stop="target = index;getPro()">确认收货</view>
					</view>
				</view>
				<view class="botFn df dfr ptb20" v-else-if="item.status == 5">
					<view class="mr30">
						<view class="btn cancel w150">查看详情</view>
					</view>
					<view>
						<view class="btn prmary w200" @click.stop="target = index;reback()">取消退款申请</view>
					</view>
				</view>
				<view class="botFn df dfr ptb20" v-else>
					<view>
						<view class="btn prmary w150">查看详情</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="backAlt" type="center">
			<view class="popMid pt30">
				<!-- 标题 -->
				<view class="title c000 f30">填写退款理由</view>
				<!-- 编辑 -->
				<label class="edit rows w70p mauto mt50 pb10 bdb1se">
					<view class="img wh30">
						<image src="/static/1706.png" mode="aspectFit"></image>
					</view>
					<view class="f1">
						<input type="text" v-model="backVal" />
					</view>
				</label>
				<!-- 按钮 -->
				<view class="fnArea rows mt50 lh100 bdt1sE f34">
					<view class="f1 bdr1se c999" @click="$refs.backAlt.close()">取消</view>
					<view class="f1" @click="confirm">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				topNav: [{
						name: '全部',
						num: 0,
					},
					{
						status: '1',
						name: '待付款',
						num: 0,
					},
					{
						status: '2,3',
						name: '待发货',
						num: 0,
					},
					{
						status: '4',
						name: '已完成',
						num: 0,
					},
					{
						status: '5,6',
						name: '退款售后',
						num: 0,
					},
				],
				// 下标
				current: 0,
				// 内容
				wrap: {
					// 页码
					page: 1,
					// 列表
					list: [],
					// 是否加载
					ifLoad: false,
				},
				// 下标
				target: '',
				// 退款理由
				backVal: '',
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;
			// 判断类型
			if (e.type) {
				// 赋值下标
				that.current = Number(e.type) - 1;
				that.getordernum()
			}
		},

		// 页面出现
		onShow() {
			that.wrap.page = 1;

			// 订单列表
			that.order_list();


			// if (uni.getStorageSync('token') != '') {
			// 	that.openMsg()
			// }
		},

		// 页面触底
		onReachBottom() {
			// 判断是否可以加载
			if (that.wrap.ifLoad) {
				// 增加页码
				that.wrap.page++;
				// 订单列表
				that.order_list();
			}
		},

		// 下拉刷新
		onPullDownRefresh() {
			// 增加页码
			that.wrap.page = 1;

			// 订单列表
			that.order_list();
		},

		// 方法集
		methods: {
			openMsg() {
				wx.requestSubscribeMessage({ // 调起消息订阅界面
					tmplIds: [
						'oBCRIvYM7H8H3qqh93esosyYGbTWtsvecQOYW8qMw0U',
						'euQCXU1OEptbQLuqQrVcQmptq82TQoCXK6JM5iW80E0'
					],
					success(res) {
						console.log('订阅消息 成功 ');
						console.log(res);
					},
					fail(er) {
						console.log("订阅消息 失败 ");
						console.log(er);
					}
				})
			},
			//订单表头数据
			getordernum() {
				console.log(2);
				var that = this
				// 请求接口
				that.request({
					url: '/api/index/ordernum',
					// 上传数据
					data: {
						token: uni.getStorageSync('token'),
					},
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							that.topNav[0].num = rs.data[0]
							that.topNav[1].num = rs.data[1]
							that.topNav[2].num = rs.data[2]
							that.topNav[3].num = rs.data[3]
							that.topNav[4].num = rs.data[4]
						}
					}
				})
			},
			// 取消订单
			cancel() {
				// 弹窗提示
				that.alert({
					value: '确认取消订单？',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 更改订单状态
							that.util.changeOrder({
								data: {
									// 需要操作的id
									id: that.wrap.list[that.target].id,
									// 修改状态
									status: 7,
									// 取消时间
									canceltime: Date.parse(new Date()) / 1000,
								},
							}, that)
						}
					},
				});
			},

			// 确认取消退款
			reback() {
				// 弹窗提示
				that.alert({
					value: '确认取消退款？',
					success(rs) {
						// 判断点击确定
						if (rs.confirm) {
							// 更改订单状态
							that.util.changeOrder({
								data: {
									// 需要操作的id
									id: that.wrap.list[that.target].id,
									// 修改状态
									status: 2,
								},
								success(rs) {
									// 判断下标
									if (that.current == 0) {
										// 更改状态
										that.wrap.list[that.target].status = 2;

										// 重新赋值刷新页面
										that.wrap = Object.assign({}, that.wrap);
									}
								},
							}, that)
						}
					},
				});
			},

			// 确定退款
			confirm() {
				// 判断填写原因
				if (!that.backVal) {
					// 弹窗提示
					that.alert('请填写退款理由');
					return;
				}

				// 更改订单状态
				that.util.changeOrder({
					data: {
						// 需要操作的id
						id: that.wrap.list[that.target].id,
						// 退款理由
						refund_reason: that.backVal,
						// 修改状态
						status: 5,
					},
					success(rs) {
						// 关闭弹窗
						that.$refs.backAlt.close();

						// 清空内容
						that.backVal = '';

						// 判断下标
						if (that.current == 0) {
							// 更改状态
							that.wrap.list[that.target].status = 5;

							// 重新赋值刷新页面
							that.wrap = Object.assign({}, that.wrap);
						}
					},
				}, that)
			},

			// 确认收货
			getPro() {
				// 弹窗提示
				that.alert({
					value: '是否确认收货?',
					success(rs) {
						if (rs.confirm) {
							// 改变订单状态
							that.util.changeOrder({
								data: {
									// 订单id
									id: that.wrap.list[that.target].id,
									// 状态
									status: 4,
								},
								success(rs) {
									// 判断下标
									if (that.current == 0) {
										// 更改信息
										that.wrap.list[that.target].status = 4;
										// 更改状态
										that.wrap.list[that.target].status_text = rs.data.status_text;
										// 重新赋值刷新页面
										that.wrap = Object.assign({}, that.wrap);
									}
								},
							}, that)
						};
					},
				});
			},

			// 订单列表
			order_list() {
				// 变量
				var wrap = that.wrap;

				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: {
						table: 'goods_order',
						// 订单状态
						status: that.current == 0 ? '' : that.topNav[that.current].status,
						// 页
						page: wrap.page,
						// 条
						count: 10,
						// 自己
						mine: 1,
					},
					// 加载
					load: 1,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 判断页码
							if (wrap.page == 1) {
								// 清空列表
								that.wrap.list = [];
							}

							// 赋值列表
							wrap.list.push(...rs.data);

							// 判断数据是否可以加载
							if (rs.data[9]) {
								wrap.ifLoad = true;
							} else {
								wrap.ifLoad = false;
							}

							// 赋值内容
							that.wrap = wrap;
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					},
					complete() {
						// 关闭下拉刷新
						uni.stopPullDownRefresh();
					},
				})
			},

			// 切换下标
			change(index) {
				// 判断是否相等
				if (that.current == index) {
					return;
				}

				// 赋值下标
				that.current = index;

				// 订单列表
				that.order_list();
			},

			// 跳转详情
			toDetail(item) {
				// 跳转页面
				uni.navigateTo({
					url: '/pages/my/order/detail?id=' + item.id,
				})
			},

			// 支付
			pay() {
				
				// 支付
				that.util.payment({
					url: "/api/goods_order/pay",
					data: {
						id: that.wrap.list[that.target].id,
						platform: "wechatMini2"
					},
					// 完成
					complete(rs) {
						// 更改状态
						that.wrap.list[that.target].status = 2;
						that.wrap.list[that.target].status_text = rs.data.status_text;

						// 重新赋值刷新页面
						that.wrap = Object.assign({}, that.wrap);
					},
				})
			},
		},
	};
</script>
<style lang="less">
	@active: #FFA351;

	// 导航条
	.navBar {
		display: flex;
		height: 100rpx;
		white-space: nowrap;
		background-color: white;

		// 导航块
		.nav {
			display: inline-block;
			flex: 1;
			text-align: center;

			// 内容
			.item {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				padding: 20rpx 30rpx;

				// 文字
				.txt {
					color: #666;
					font-size: 30rpx;
					transition: .3s;
				}

				// 线
				.line {
					width: 0;
					height: 10rpx;
					margin: 0 auto;
					background-color: @active;
					border-radius: 100rpx;
					transition: .3s;
				}
			}
		}

		// 激活
		.active {

			// 项
			.item {

				// 文字
				.txt {
					color: @active;
				}

				// 线
				.line {
					width: 100%;
				}

			}
		}
	}

	// 订单
	.order {

		// 按钮
		.btn {
			padding-top: 15rpx;
			padding-bottom: 15rpx;
		}
	}
</style>
